<template>
  <div class="emoticon">
    <div class="title">表情</div>
    <div
      v-for="(elImg, text) in emoji.emojis"
      v-html="elImg"
      class="emoticon-item"
      @click="clickEmoticon(text)"
    ></div>
    <div class="clear"></div>
  </div>
</template>

<script setup lang="ts">
import { emojiList as emoji } from '../../utils/emojis'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any

const clickEmoticon = (emoji) => {
  // 调用父页面的回调方法
  proxy.$emit('selected', emoji)
}
</script>

<style lang="scss">
.emoji-box,
.emoticon {
  width: 100%;
}

.emoticon {
  .title {
    width: 50%;
    height: 25px;
    line-height: 25px;
    color: #ccc;
    font-weight: 400;
    padding-left: 3px;
    font-size: 12px;
  }

  .emoticon-item {
    width: 30px;
    height: 30px;
    margin: 2px;
    float: left;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      transform: scale(1.3);
    }
  }

  .symbol {
    font-size: 22px;
  }
}
</style>
